<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>我秀地图-矢量点绘制</title>
    <meta charset="utf-8"/>
    <link href="" rel="shortcut icon" type="image/x-icon"/>
    <link href="../css/imap-gl.css" rel="stylesheet"/>
    <script src="../js/imap-gl.js"></script>
    <style>
        html, body {
            padding: 0;
            margin: 0;
            height: 100%;
            overflow: hidden;
        }

        #map {
            height: 100%;
            z-index: 0;
        }

    </style>
</head>
<body>
<div id="map"></div>
<script>
    var map = new imapgl.Map({
        container: 'map',
        center: [116.27771321722543, 39.952128183377255],
        zoom: 3,
        minZoom: 3,
        hash: true,
        maxZoom: 20,
        localIdeographFontFamily: "微软雅黑, 'Microsoft Sans Serif', sans-serif,宋体",
        style: "../styles/v1/light-v10-gcj02.json"
    });

    map.on('load', function () {
        function getRandomNumberByRange(start, end) {
            return Math.floor(Math.random() * (end - start) + start)
        }

        var data = [];

        for (var i = 0; i < 300000; i++) {

            var marker = {
                "type": "Feature",
                "properties": {"id": "Point" + i, "mag": "Point" + i, "time": i, "felt": null, "tsunami": 0},
                "geometry": {
                    "type": "Point",
                    "coordinates": [getRandomNumberByRange(70,180.1)+Math.random(), getRandomNumberByRange(25.1,45.1)+Math.random(), 0.0]
                }
            }
            data.push(marker);

            delete marker;
        }

        map.addSource('earthquakes', {
            type: 'geojson',
            data: {
                "type": "FeatureCollection",
                "crs": {"type": "name", "properties": {"name": "urn:ogc:def:crs:OGC:1.3:CRS84"}},
                "features": data
            }
        });



        map.addLayer({
            id: 'cluster-count',
            type: 'symbol',
            source: 'earthquakes',
            filter: ['has', 'point_count'],
            layout: {
                'text-field': '{point_count_abbreviated}',
                'text-font': ["Microsoft YaHei"],
                'text-size': 12
            }
        });

        map.addLayer({
            id: 'unclustered-point',
            type: 'circle',
            source: 'earthquakes',
            filter: ['!', ['has', 'point_count']],
            paint: {
                'circle-color': '#11b4da',
                'circle-radius': 4,
                'circle-stroke-width': 1,
                'circle-stroke-color': '#fff'
            }
        });

        map.on('click', 'unclustered-point', function (e) {
            const coordinates = e.features[0].geometry.coordinates.slice();
            const mag = e.features[0].properties.mag;
            const tsunami =
                    e.features[0].properties.tsunami === 1 ? 'yes' : 'no';

            while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
                coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
            }

            new imapgl.Popup()
                    .setLngLat(coordinates)
                    .setHTML("点:" + mag + "<br>消息:" + tsunami)
                    .addTo(map);
        });

        map.on('mouseenter', 'clusters', function () {
            map.getCanvas().style.cursor = 'pointer';
        });
        map.on('mouseleave', 'clusters', function () {
            map.getCanvas().style.cursor = '';
        });
    });

</script>
</body>
</html>
